<template>
  <div id="sign" v-if="show">
    <div class="bg" @click="clear"></div>
    <div class="modal">
      <div class="modal-top">
        <div class="modal-title">选择话题</div>
        <div class="modal-clear" @click="clear">
          <img src="../assets/imgs/shanchu.png" alt="" />
        </div>
      </div>
      <div class="modalSearch">
        <div class="search">
          <div class="icon">
            <img src="../assets/imgs/fangda.png" alt="" />
          </div>
          <input
            type="text"
            placeholder="选择合适的话题更多的赞哦~"
            v-model="keyword"
            @change="search()"
          />
        </div>
        <span class="back" @click="back">取消</span>
      </div>
      <div class="tagContent" v-if="list.length != 0">
        <div class="tag" v-if="isSelect">
          <div class="tagTitle">
            <div>已选标签</div>
            <div class="save" @click="goSubmit">保存</div>
          </div>
          <div class="tagDetail">
            <div
              class="tagCtn isSelect"
              v-for="(item, index) in selectTag"
              :key="item.talkId"
            >
              <div class="selectCtn">#{{ item }}</div>
              <div class="clearBtn" @click="delTag(index)">
                <img src="../assets/imgs/tagX.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="tag">
          <div class="tagTitle">
            推荐话题
          </div>
          <div class="tagDetail">
            <div
              class="tagCtn"
              v-for="(item, index) in recommendList"
              @click="selTag(item.talkContent)"
              :key="item.talkId"
            >
              #{{ item.talkContent }}
            </div>
          </div>
        </div>
        <div class="tag">
          <div class="tagTitle">热门话题</div>
          <div class="tagDetail">
            <div
              class="tagCtn"
              v-for="(item, index) in list"
              @click="selTag(item.talkContent)"
              :key="item.talkId"
            >
              #{{ item.talkContent }}
            </div>
          </div>
        </div>
      </div>
      <div class="tagContent" v-else>
        <div class="tag">
          <div class="tagTitle">创建新标签</div>
          <div class="tagDetail">
            <div
              class="tagCtn"
              v-for="item in newList"
              @click="creatTalk(item)"
              :key="item.talkId"
            >
              #{{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="sign-btns">
        <div class="pay" @click="goSubmit()">确认</div>
        <div class="clear" @click="clear">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    interestId: {
      type: Number,
    },
  },
  data() {
    return {
      show: false,
      list: [],
      history: [],
      keyword: "",
      isHot: true,
      content: "",
      isSelect: false,
      recommendList: [],
      newList: [],
      selectTag: [],
      isNew: true,
    };
  },
  watch: {
    interestId: {
      handler(newVal, oldVal) {
        this.recommendTalk(newVal);
      },
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.getRem(1920, 100);
    //根据话题推荐的标签
  },
  methods: {
    //主函数
    init() {
      //搜索记录
      this.$post(`/laiwen/history/frontend/list?flag=0`, {}).then((res) => {
        this.history = res.list;
      });
      this.hotTopic()
    },
    //搜索方法
    search() {
      //保存搜索记录
      this.$post(
        `/laiwen/history/frontend/save?keywordHistory=${this.keyword}`
      ).then((res) => {});
      //查询
      this.$fetch(
        `/laiwen/talk/frontend/search?keyword=${this.keyword}&page=1&limit=10`
      ).then((res) => {
        this.list = res.list;
        if (res.list.length == 0) {
          this.newList.push(this.keyword);
          this.isHot = false;
          this.isNew = false;
        }else{
          this.isNew = true;
        }
      });
      //当输入框为空时显示热门话题
      // if(this.keyword === ''){
      //   this.back()
      // }
    },
    clear() {
      this.show = !this.show;
      console.log(this.show);
    },
    //取消方法
    back() {
      this.isHot = true;
      this.init();
    },
    hotTopic() {
      //热门话题列表
      this.$fetch(`/laiwen/talk/frontend/talklist`, {}).then((res) => {
        this.list = res.list;
      });
    },
    //选择话题,顺带传值给父组件
    goSubmit(item) {
      let e = this.selectTag.join(",") || item;
      this.$post(`/laiwen/talk/frontend/save?content=${e}`, {}).then((res) => {
        console.log(res);
      });
      this.show = false;
      this.content = e;
      this.$emit("sendTalk", this.content);
    },
    //推荐标签
    recommendTalk(id) {
      this.$fetch(`/laiwen/talk/frontend/ilist?interestId=${id}`).then(
        (res) => {
          this.recommendList = res.list;
        }
      );
    },
    //选择标签
    selTag(e) {
      let tag = e;
      let list = this.selectTag;
      //限制判断
      if (list.length >= 5) {
        this.$message({
          message: "最多选择5个标签",
          type: "warning",
          customClass: "boxZindex",
        });
        return false;
      }
      //查重判断
      for (let i of list) {
        if (list.indexOf(tag) != -1) {
          this.$message({
            message: "不能选择相同的标签",
            type: "warning",
            customClass: "boxZindex",
          });
          return false;
        }
      }
      list.push(tag);
      this.isSelect = true;
      this.selectTag = list;
    },
    //自定义标签操作
    creatTalk(e) {
      this.isNew = true;
      this.selTag(e);
      //重置热门标签
      this.hotTopic();
    },
    delTag(index) {
      this.selectTag.splice(index, 1);
      if (this.selectTag.length == 0) {
        this.isSelect = false;
      }
    },
  },
};
</script>

<style scoped>
#sign {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  z-index: 22222;
  top: 0;
}
.bg {
  width: 100%;
  min-height: 100%;
  opacity: 0.25;
  background: black;
  position: fixed;
  /* z-index: 2; */
}

.modal {
  width: 5rem;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
  z-index: 99999;
  background: white;
  border-radius: 0.05rem;
  margin-top: 1rem;
}
.modal .modalSearch {
  width: 100%;
  height: 0.74rem;
  display: flex;
  margin-bottom: 0.26rem;
  align-items: center;
}
.modal .modalSearch .search {
  width: 3.59rem;
  height: 0.45rem;
  background: rgba(243, 243, 243, 1);
  opacity: 1;
  border-radius: 0.39rem;
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 0.56rem;
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 0.35rem;
}
.modal .modalSearch .search input {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  outline: none;
  background: #f3f3f3;
  font-size: 0.16rem;
  border: none;
}

.modal .modalSearch .search .icon {
  width: 0.16rem;
  height: 0.16rem;
  position: absolute;
  left: 0;
  margin-left: 0.26rem;
}
.modal .modalSearch .search .icon img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.modal .modalSearch span {
  width: 0.38rem;
  height: 0.26rem;
  font-size: 0.19rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.26rem;
  cursor: pointer;
  color: rgba(252, 236, 91, 1);
  opacity: 1;
  margin-left: 0.36rem;
}
.modal .hotTalk {
  width: 5rem;
  height: 0.52rem;
  background: rgba(245, 245, 245, 1);
  display: flex;
  align-items: center;
  padding-left: 0.35rem;
  font-size: 0.17rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(112, 112, 112, 1);
  box-sizing: border-box;
  opacity: 1;
}
.modal .talk {
  width: 100%;
  height: 3.77rem;
  background: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.modal .talk .talkSingle {
  width: 100%;
  height: 0.58rem;
  box-sizing: border-box;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
  flex-shrink: 0;
  border-bottom: 0.01rem solid#F5F5F5;
}
.modal .talk .talkSingle:hover {
  background: #e4e4e4;
}
::-webkit-scrollbar {
  display: none;
}
.search ::placeholder {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(152, 152, 152, 1);
  opacity: 1;
}
.modal .modal-top {
  width: 100%;
  height: 0.53rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.32rem;
  position: relative;
  border-bottom: 0.01rem solid #f5f5f5;
}
.modal .modal-top .modal-title {
  width: 0.7rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(40, 40, 40, 1);
  opacity: 1;
}
.modal .modal-top .modal-clear {
  width: 0.11rem;
  height: 0.11rem;
  cursor: pointer;
  position: absolute;
  right: 0.32rem;
}
.modal-btns {
  width: 4.35rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.72rem;
}
.modal-btns::after {
  content: "";
  width: 0.88rem;
}
.modal .modal-single {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0.24rem;
  width: 1.3rem;
  height: 0.96rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  cursor: pointer;
  border-radius: 0.05rem;
  border: 0.01rem solid transparent;
  background: #eeeeee;
  color: #282828;
}
image {
  width: 100%;
  display: block;
  height: 100%;
}
.modal-text {
  width: 0.42rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
}
.modal-btn {
  width: 0.88rem;
  height: 0.78rem;
  background: rgba(238, 238, 238, 1);
  opacity: 1;
  border-radius: 0.05rem;
  margin-top: 0.08rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.gift-icon {
  font-size: 0.16rem;
}
.modal-btn .gift-icon {
  width: 0.31rem;
  height: 0.31rem;
  margin-top: 0.13rem;
  font-size: 0.16rem;
}
.gift-text {
  margin-top: 0.07rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  opacity: 1;
}
.sign-btns {
  width: 100%;
  display: flex;
  bottom: 0;
  height: 0.6rem;
  align-items: center;
  justify-content: center;
}
.pay {
  width: 1.22rem;
  height: 0.38rem;
  background: rgba(255, 189, 61, 1);
  opacity: 1;
  border-radius: 0.05rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.38rem;
  cursor: pointer;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  outline: none;
  margin-right: 0.2rem;
}
.clear {
  width: 1.22rem;
  height: 0.38rem;
  background: white;
  opacity: 1;
  border-radius: 0.05rem;
  cursor: pointer;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.38rem;
  border: 0.01rem solid rgba(153, 153, 153, 1);
  text-align: center;
  color: #282828;
  opacity: 1;
}
.clear-btn {
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
  right: -0.24rem;
  top: 0.18rem;
  cursor: pointer;
}
/* 选中后的样式 */
.selected {
  color: #ffbd3d !important;
  border: 0.01rem solid #ffbd3d !important;
  background: white !important;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.tagContent {
  width: 100%;
  box-sizing: border-box;
  padding: 0rem 0.31rem;
}

.tagContent .tag {
  width: 100%;
  margin-bottom: 0.04rem;
}

.tag .tagTitle {
  font-size: 0.15rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(136, 136, 136, 1);
  width: 100%;
  display: flex;
  justify-content: space-between;
  opacity: 1;
  margin-bottom: 0.16rem;
}

.save {
  width: 0.53rem;
  height: 0.25rem;
  background: rgba(255, 230, 0, 1);
  opacity: 1;
  font-size: 0.11rem;
  font-family: PingFang SC;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #090909;
}

.tag .tagDetail {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.tagDetail .tagCtn {
  width: fit-content;
  height: 0.32rem;
  background: rgba(243, 243, 243, 1);
  opacity: 1;
  border-radius: 0.4rem;
  text-align: center;
  font-size: 0.15rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(110, 110, 110, 1);
  box-sizing: border-box;
  padding: 0.06rem 0.15rem;
  margin-right: 0.12rem;
  display: flex;
  cursor: pointer;
  align-items: center;
  margin-bottom: 0.12rem;
}

.isSelect {
  color: rgba(9, 9, 9, 1) !important;
}

.clearBtn {
  width: 0.1rem;
  height: 0.1rem;
  margin-left: 0.1rem;
}

.clearBtn image {
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
}
</style>
